<template>
  <el-dialog
    title="选择人员"
    :visible.sync="show"
    custom-class="selectPersonnel"
    center
    :modal="modal"
  >
    <div class="middleContent">
      <el-input
        placeholder="搜索人员名称"
        v-model="personnelName"
        class="nameInput"
      >
        <i slot="suffix" class="el-input__icon el-icon-date"></i>
      </el-input>
      <div class="personnelTree">
        <el-tree
          :data="data"
          :props="defaultProps"
          ref="policeTree"
          @check-change="handleCheckChange"
          show-checkbox
          accordion
          :render-content="renderContent"
          node-key="id"
          @node-click="showPeopleNowStatus"
        ></el-tree>
      </div>
    </div>
    <div class="disableOrEnableButton" slot="footer">
      <button class="disable">保 存</button>
      <button class="cancel">取 消</button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  methods: {
    renderContent(h, { node, data, store }) {
      if (data.parent) {
        var box = <span>{node.label}</span>;
      } else {
        if (data.onLine) {
          box = (
            <span>
              <span class="iconfont icon-yonghu1 online"></span>
              <span>{node.label}</span>
            </span>
          );
        } else {
          box = (
            <span>
              <span class="iconfont icon-yonghu1 notonline"></span>
              <span>{node.label}</span>
            </span>
          );
        }
      }
      return (
        <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
          <span>{box}</span>
        </span>
      );
    },
  },
  data() {
    return {
      show: false,
      modal: false,
      personnelName: "",
      defaultProps: {
        children: "children",
        label: "label",
      },
      data: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
    };
  },
};
</script>

<style lang='scss'>
.selectPersonnel {
  width: 405px !important;
  height: 768px;
  background: linear-gradient(0deg, #060d29, #052053, #060d29);
  border: 1px solid #0aa0ca;
  opacity: 1;
  box-sizing: border-box;
  .middleContent {
    .nameInput {
      width: 320px;
      input {
        height: 35px;
        background: rgba(18, 38, 80, 0.49);
        border: 1px solid rgba(57, 225, 255, 0.64);
        border-radius: 5px;
      }
    }
    .personnelTree {
      width: 320px;
      height: 500px;
      margin-top: 20px;
      background-color: transparent;
      .el-tree {
        width: 320px;
        height: 500px;
        background-color: transparent;
      }
    }
    .el-tree-node__content:hover {
      background-color: #052053;
    }
    .el-checkbox__inner {
      width: 14px;
      height: 14px;
      border: 2px solid rgb(0, 204, 255);
      background-color: transparent;
      line-height: 12px;
      text-align: center;
    }
    .el-tree-node:focus > .el-tree-node__content {
      background-color: #052053;
    }
  }
  .el-icon-close {
    &::before {
      width: 28px;
      height: 28px;
      background-color: rgb(6, 119, 150);
      color: rgb(6, 15, 43);
      border-radius: 50%;
      font-weight: bolder;
    }
  }
}
</style>